<!-- 审核卡券列表 -->
<template>
	<view class="wrapper">
		<view class="inner">
			<view class="list">
				<view class="item" v-for="(item,index) in useDataResult.dataList" :key="index">
					<view class="row title">
						<view class="col">{{ item.couponName }}</view>
					</view>
					<view class="row">
						<view class="col">
							<text class="c_999">卡券数量：</text>{{ item.couponNum }}张
						</view>
					</view>
					<view class="row">
						<view class="col">
							<text class="c_999">商户名称：</text>{{ item.mchName }}
						</view>
					</view>
					<view class="row">
						<view class="col"><text class="c_999">活动时间：</text><text style="letter-spacing: -1rpx;">{{ dayjs(item.sTime).format('YYYY[年]M[月]D[日]') }}-{{ dayjs(item.eTime).format('YYYY[年]M[月]D[日]') }}</text></view>
						<view class="col btn" @click="onViewInfo(item)">查看</view>
					</view>
					<image class="state-img audit" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/d5033708-fbdd-4616-8c76-fdb985fad00d.png"></image>
				</view>
			</view>
			<gzListNull :list="useDataResult.dataList"></gzListNull>
		</view>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import numberUtil from '@/util/numberUtil.js'
	import dayjs from 'dayjs'
	import { $mchActivityAgentFindActivity } from '@/http/marketing/apiMarketing.js'
	import useGetList from '@/hooks/useGetList.js'
	
	const { useDataResult, getList } = useGetList($mchActivityAgentFindActivity, data => data, {}, false)
	
	onShow(async () => {
		uni.showLoading({
			title: '加载中...'
		})
		await getList({ state: 1 })
		uni.hideLoading()
	})
	
	// 查看详情
	function onViewInfo(item){
		const {activityId,awardId,mchNo,auditRecordsId} = item
		uni.navigateTo({
			url: `/marketing/mchActivity/audit/viewInfo?activityId=${activityId}&awardId=${awardId}&mchNo=${mchNo}&auditRecordsId=${auditRecordsId}`
		})
	}
</script>

<style lang="less" scoped>
	.state-img{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		&.audit{	// 审核
			right: 20rpx;
			top: 40rpx;
		}
	}
	.c_999{
		color: #999999;
	}
	.btn{
		width: 136rpx;
		background-color: #24C789;
		color: #ffffff;
		padding: 10rpx 0;
		text-align: center;
		border-radius: 8rpx;
		flex-shrink: 0;
	}
	.wrapper{
		background-color: #F5F6FA;
		width: 100%;
		min-height: 100vh;
		position: relative;
		box-sizing: border-box;
		.inner{
			padding: 0 32rpx;
			.list{
				overflow: hidden;
				.item{
					margin-top: 24rpx;
					background-color: #ffffff;
					padding: 40rpx 20rpx;
					border-radius: 18rpx;
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;
					font-size: 28rpx;
					position: relative;
					
					.row{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						gap: 10rpx;
						
						&.title{
							font-weight: bold;
							.col{
								&:nth-child(1){
									font-size: 36rpx;
								}
								&:nth-child(2){
									font-size: 42rpx;
									color: #ff8831;
									&:before{
										content: '￥';
										font-size: 32rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>